<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./bs/css/bootstrap.css">
</head>

<body>
    <div id="app">
        <div class="form-group">
            <label for="exampleInputEmail1">姓名</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="姓名" v-model="name">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">电话</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="电话" v-model="tel">
        </div>
        <button type="submit" class="btn btn-info" @click="add" v-if="btn">添加</button>
        <button type="submit" class="btn btn-info" @click="success" v-if="!btn">修改</button>
        <button type="submit" class="btn btn-warning" @click="_empty">重置</button>

        <table class="table table-bordered">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in user" :key="item.id">
                <td>{{ index+1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.tel }}</td>
                <td>
                    <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
                    <button type="button" class="btn btn-warning" @click="xiu(item.id,item.name,item.tel)">修改</button>
                </td>
            </tr>
        </table>
        <button type="button" class="btn btn-danger" @click="del(index)">全部删除</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                id: '1',
                name: '',
                tel: '',
                user: [],
                btn: true,
                b: ''
            },
            methods: {
                add() {
                    if (!this.name || !this.tel) {
                        alert('不能为空')
                    } else {
                        var arr = { id: this.id, name: this.name, tel: this.tel }
                        this.id++;
                        this.name = '';
                        this.tel = '';
                        this.user.push(arr)
                    }

                },
                _empty() {
                    this.name = ""
                    this.tel = ""
                },
                del(index) {
                    this.user.splice(index, 1)
                },
                xiu(id, name, tel) {
                    this.b = id;
                    this.name = name;
                    this.tel = tel;
                    this.btn = false;
                },
                success() {
                    if (!this.name || !this.tel) {
                        alert('不能为空')
                    } else {
                        this.user[this.b - 1].name = this.name
                        this.user[this.b - 1].tel = this.tel
                        btn = true;
                        this.name='';
                        this.tel='';
                    }

                }
            }
        })
    </script>
</body>

</html>